<template>
  <div>
    <button @click="comName = 'MyOne'">展示one</button>
    <button @click="comName = 'MyTwo'">展示two</button>
    <!-- 给动态组件套一层keep-alive,可以保持组件不被销毁,从而可以保持组件的状态 -->
    <!-- include="MyOne,MyTwo" 表示指定哪些组件需要保持状态,不指定的就不会被缓存 -->
    <!-- exclude="MyOne,MyTwo" 表示指定哪些组件不需要保持状态,不指定的就会被缓存 -->
    <!-- 坑点：如果需要缓存多个组件，多个组件用逗号分割，绝对不能加空格 -->
    <!-- 动态属性,使用component标签,关键是:is属性,属性值是组件名 -->
    <keep-alive include="MyTwo">
      <component :is="comName"></component
    ></keep-alive>
  </div>
</template>

<script>
import MyOne from "./components/MyOne.vue";
import MyTwo from "./components/MyTwo.vue";
export default {
  data() {
    return {
      comName: "MyOne",
    };
  },
  components: { MyOne, MyTwo },
};
</script>

<style>
</style>